const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  //起点
  entry: "./src/index.js",
  output: {
    filename: "built.js",
    path: `${__dirname}/build`,
    publicPath: "./",
  },
  //loader config
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.html$/,
        //处理html文件中的img图片（引入img，从而被img-loader
        loader: "html-loader",
        options: {
          esModule: false,
        },
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: "url-loader", //依赖于file-loader
        //优点：减少请求数量（减轻服务器压力）
        //缺点：图片体积更大
        options: {
          limit: 8 * 1024,
          //因为url-loader默认用es6模块化解析，而html-loader引入图片是commonjs
          // 解析ui出问题：【object module】
          // 解决，关闭模块化es6
          esModule: false,
          //给图片重命名
          name:'[hash:10].[ext]'
        },
      },
    ],
  },
  plugins: [
    //plugins config
    new HtmlWebpackPlugin({
      //复制html文件，并自动引入打包输出的所有资源
      template: "./src/index.html",
    }),
  ],
  mode: "development",
  //   mode:'production',
};
